<form ng-submit="ctrl.renameAddressBook()" ng-show="ctrl.editing">
	<input select-expression="ctrl.editing" placeholder="{{ctrl.t.addressBookName}}" class="renameAddressBookInput" ng-model="ctrl.addressBook.displayName" type="text" />
	<input type="submit" value="" class="renameAddressBookSubmit inline-button icon-confirm action pull-right" />
</form>
<span class="addressBookName" title="{{ctrl.addressBook.displayName}}" ng-hide="ctrl.editing">{{ctrl.addressBook.displayName}}</span>
<span class="utils" ng-hide="ctrl.editing">
	<span class="action">
		<span
			class="addressbooklist-icon icon-shared"
			title="{{ctrl.t.shareAddressbook}}"
			ng-click="ctrl.toggleSharesEditor(ctrl.addressBook)">
		</span>
	</span>
	<span class="action">
		<span
			class="icon-more openMenuButton"
			ng-click="ctrl.toggleMenu($id)">
		</span>
	</span>
	<div class="popovermenu bubble menu"
		 ng-class="{open: $parent.ctrl.openedMenu === $id}"
		 ng-click="ctrl.closeMenus()"
		 click-outside="ctrl.closeMenus()"
		 outside-if-not=".openMenuButton, .popovermenu">
		<ul>
			<li>
				<a class="addressbookurl-copy btn"
						ngclipboard ngclipboard-success="ctrl.clipboardSuccess()" ngclipboard-error="ctrl.clipboardError()"
						data-clipboard-text="{{ctrl.addressBook.url}}"
						tooltip-placement="right" uib-tooltip="{{ctrl.tooltipTitle}}" tooltip-append-to-body="true">
					<span class="icon icon-public"></span>
					<span>{{ctrl.t.copyURL}}</span>
				</a>
			</li>
			<li ng-show="ctrl.canExport">
				<a href="{{ctrl.addressBook.url}}?export" id="download_{{$id}}">
					<span class="icon icon-download"></span>
					<span>{{ctrl.t.download}}</span>
				</a>
			</li>
			<li>
				<a ng-click="ctrl.edit()">
					<span class="icon icon-rename"></span>
					<span>{{ctrl.t.renameAddressbook}}</span>
				</a>
			</li>
			<li ng-if="ctrl.list.length > 1">
				<a ng-click="ctrl.deleteAddressBook()">
					<span class="icon icon-delete"></span>
					<span>{{ctrl.t.deleteAddressbook}}</span>
				</a>
			</li>
		</ul>
	</div>
</span>

<div class="addressBookUrlContainer" ng-show="ctrl.showInputUrl">
	<input id="addressBookUrl_{{ctrl.addressBook.ctag}}" class="addressBookUrl"
		   uib-tooltip="{{ctrl.InputUrlTooltip}}"
		   tooltip-is-open="true" tooltip-append-to-body="true"
		   type="url" value="{{ctrl.addressBook.url}}" readonly />
	<input type="button" class="inline-button icon-close action pull-right" ng-click="ctrl.showInputUrl=false" uib-tooltip="{{ctrl.t.close}}">
</div>

<div class="addressBookShares" ng-show="ctrl.editingShares">
	<i ng-show="ctrl.loadingSharees" class="glyphicon glyphicon-refresh"></i>
	<input
		type="text"
		class="shareeInput"
		uib-typeahead="sharee.display for sharee in ctrl.findSharee($viewValue)"
		typeahead-on-select="ctrl.onSelectSharee($item)"
		typeahead-loading="ctrl.loadingSharees"
		ng-model="ctrl.selectedSharee"
		placeholder="{{ctrl.t.shareInputPlaceHolder}}">
	<ul class="addressBook-share-list">
		<li ng-repeat="userShare in ctrl.addressBook.sharedWith.users" class="addressBook-share-item">
			<span class="icon icon-user"></span>
			<span class="shareeIdentifier">{{ userShare.displayname }}</span>
			<span class="utils">
				<input type="checkbox" name="editable" class="checkbox"
					   id="checkbox_sharedWithUser_{{ctrl.addressBook.tmpId}}_{{$id}}"
					   ng-model="userShare.writable" value="edit"
					   ng-change="ctrl.updateExistingUserShare(userShare.id, userShare.writable)">
				<label for="checkbox_sharedWithUser_{{ctrl.addressBook.tmpId}}_{{$id}}"> {{ctrl.t.canEdit}}</label>
				<span class="action">
					<span href="#"
						  data-id="{{ ctrl.addressBook.uri }}"
						  title="{{ctrl.t.delete}}"
						  class="icon-delete"
						  ng-click="ctrl.unshareFromUser(userShare.id)">
					</span>
				</span>
			</span>
		</li>
		<li ng-repeat="groupShare in ctrl.addressBook.sharedWith.groups" class="calendar-share-item">
			<span class="icon icon-group"></span>
			<span class="shareeIdentifier">{{ groupShare.displayname }}</span>
			<span class="utils">
				<input type="checkbox" name="editable" class="checkbox"
					   id="checkbox_sharedWithGroup_{{ctrl.addressBook.tmpId}}_{{$id}}"
					   ng-model="groupShare.writable" value="edit"
					   ng-change="ctrl.updateExistingGroupShare(groupShare.id, groupShare.writable)">
				<label for="checkbox_sharedWithGroup_{{ctrl.addressBook.tmpId}}_{{$id}}"> {{ctrl.t.canEdit}}</label>
				<span class="action">
					<span href="#"
						  data-id="{{ ctrl.addressBook.uri }}"
						  title="{{ctrl.t.delete}}"
						  class="icon-delete"
						  ng-click="ctrl.unshareFromGroup(groupShare.id)">
					</span>
				</span>
			</span>
		</li>
	</ul>
</div>
